<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-button type="primary"  @click="showEdit=true;">新增</el-button>
   
      <p>分段单位：克；分段收费单位：每kg/元</p>
      <el-table class="mt-20" :data="list" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="weight" label="大货重量" />
        <el-table-column prop="firstWeight" label="分段一" />
        <el-table-column prop="firstPrice" label="分段一收费"   width="90"/>
        <el-table-column prop="costFirstPrice" label="分段一收费成本"   width="90"/>
        <el-table-column prop="secondWeight" label="分段二"   />
        <el-table-column prop="secondPrice" label="分段二收费" width="90"/>
        <el-table-column prop="costSecondPrice" label="分段二收费成本" width="90"/>
        <el-table-column prop="thirdWeight" label="分段三" />
        <el-table-column prop="thirdPrice"  label="分段三收费" width="90"/>
        <el-table-column prop="costThirdPrice"  label="分段三收费成本" width="90"/>
        <el-table-column prop="fourthWeight" label="分段四" />
        <el-table-column prop="fourthPrice" label="分段四收费" width="90"/>
        <el-table-column prop="costFourthPrice" label="分段四收费成本" width="90"/>
        <el-table-column prop="fifthWeight" label="分段五" />
        <el-table-column prop="fifthPrice" label="分段五收费" width="90"/>
        <el-table-column prop="costFifthPrice" label="分段五收费成本" width="90"/>
        <el-table-column prop="sixthWeight" label="分段六" />
        <el-table-column prop="sixthPrice" label="分段六收费" width="90"/>
        <el-table-column prop="costSixthPrice" label="分段六收费成本" width="90"/>
        <el-table-column prop="seventhWeight" label="分段七" />
        <el-table-column prop="seventhPrice" label="分段七收费" width="90"/>
        <el-table-column prop="costSeventhPrice" label="分段七收费成本" width="90"/>
        <el-table-column prop="eighthWeight" label="分段八" />
        <el-table-column prop="costEighthPrice" label="分段八收费成本" width="90"/>
        <el-table-column prop="text"  fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.row,scope.$index)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-tabs>
    </el-card> 
    </div>
    
    <!-- 分页 -->
    <div align="center">
      <!-- <el-pagination
        :current-page.sync="currentPage"
        layout="prev, pager, next, jumper"
        :total="total"
      /> -->
    </div>
    
    <!-- 编辑/新建弹窗 -->
    <el-dialog :visible="showEdit" @close="showEdit=false;formData={}" label-width="400px">
      <el-form label-width="260px">
        <el-form-item label="id" prop="weight" v-if="formData.id">
          <el-input v-model="formData.id" type="number" disabled />
        </el-form-item>
        <el-form-item label="大货重量" prop="weight">
          <el-input v-model="formData.weight"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段一（克））" prop="firstWeight">
          <el-input v-model="formData.firstWeight" type="number"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段一收费（每kg/元）" prop="firstPrice">
          <el-input v-model="formData.firstPrice" type="number" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="分段一收费成本（每kg/元）" prop="costFirstPrice">
          <el-input v-model="formData.costFirstPrice" type="number" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="分段二（克））" prop="secondWeight">
          <el-input v-model="formData.secondWeight" type="number"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段二收费（每kg/元）" prop="secondPrice">
          <el-input v-model="formData.secondPrice" type="number" placeholder="请输入" />
          </el-form-item>

        <el-form-item label="分段二收费（每kg/元）" prop="costSecondPrice">
          <el-input v-model="formData.costSecondPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段三（克））" prop="thirdWeight">
          <el-input v-model="formData.thirdWeight" type="number"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段三收费（每kg/元）" prop="thirdPrice">
          <el-input v-model="formData.thirdPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段三收费成本（每kg/元）" prop="costThirdPrice">
          <el-input v-model="formData.costThirdPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段四（克））" prop="fourthWeight">
          <el-input v-model="formData.fourthWeight" type="number"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段四收费（每kg/元）" prop="fourthPrice">
          <el-input v-model="formData.fourthPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段四收费成本（每kg/元）" prop="costFourthPrice">
          <el-input v-model="formData.costFourthPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段五（克））" prop="fifthWeight">
          <el-input v-model="formData.fifthWeight" type="number"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段五收费（每kg/元）" prop="fifthPrice">
          <el-input v-model="formData.fifthPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段五收费成本（每kg/元）" prop="costFifthPrice">
          <el-input v-model="formData.costFifthPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段六（克））" prop="sixthWeight">
          <el-input v-model="formData.sixthWeight" type="number"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段六收费（每kg/元）" prop="sixthPrice">
          <el-input v-model="formData.sixthPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段六收费成本" prop="costSixthPrice">
          <el-input v-model="formData.costSixthPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段七（克））" prop="seventhWeight">
          <el-input v-model="formData.seventhWeight" type="number"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段七收费（每kg/元）" prop="seventhPrice">
          <el-input v-model="formData.seventhPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段七收费成本（每kg/元）" prop="costSeventhPrice">
          <el-input v-model="formData.costSeventhPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段八（克））" prop="eighthWeight">
          <el-input v-model="formData.eighthWeight" type="number"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段八收费（每kg/元）" prop="eighthPrice">
          <el-input v-model="formData.eighthPrice" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分段八收费成本（每kg/元）" prop="costEighthPrice">
          <el-input v-model="formData.costEighthPrice" type="number" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="text-align: right;">
          <el-button @click="showEdit=false">取消</el-button>
          <el-button type="primary" @click="editSubmit">确认</el-button>
        </div>
        
      </template>
  
    </el-dialog>

    <!-- 删除确认框 -->
    <el-dialog title="提示" :visible.sync="deleteVisible" width="30%">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteComfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {selectAllLargeGoods,insertLargeGoods,updateLargeGoods,deleteLargeGoods} from "@/api/quotationSystem";
export default {
  data() {
    return {
      list: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      formData: {},
      showEdit: false,
      deleteVisible: false,
      editIndex:null,
      deleteRow:null
    };
  },
  async mounted() {
    // console.log(service)
    // swlService.select();
    this.getList()
  },
  methods: {
    async getList(){
      const res = await selectAllLargeGoods()
      this.list = res;
      this.total = res.length
    },
    handleEdit(row,index) {
      console.log(index)
      this.formData = row;
      this.showEdit = true;
      this.editIndex=index
    },
    handleDelete(row) {
      this.deleteRow = row
      this.deleteVisible = true
    },
    async deleteComfirm(){
      const res = await deleteLargeGoods({
        id: this.deleteRow.id
      })
      this.$message.success(res)
      this.deleteVisible=false
      this.getList();
    },
    async editSubmit() {
      let res = ''
      if (this.formData.id) {
        //编辑
        this.formData.status=this.formData.status?1:0
        res=await updateLargeGoods(this.formData)
      } else {
        //新增
        this.formData.status=this.formData.status?1:0
        res=await insertLargeGoods(this.formData)
      }
      this.getList()
      this.formData={}
      this.$message.success(res)
      this.showEdit=false
    }
  }
};
</script>